<template>
  <div class="peipao_body">
    <div class="serch_div">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form
            :inline="true"
            :model="serch_form"
            :label-width="'92px'"
            class="ty_serch_form"
          >
            <el-form-item label="名称">
              <el-input v-model="serch_form.name"></el-input>
            </el-form-item>

            <el-form-item>
              <div class="ty_serch_btn">
                <el-button class="cx_btn" type="primary" size="small" @click="get_listFun"
                  >查 询</el-button
                >
                <el-button class="cz_btn" size="small" @click="cz_Click">重 置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div class="table_body">
      <ty-Table :tablePrps="tablePrps" :tableData="tableData" :fixed_width="'250'">
        <!-- <template slot-scope="props" slot="diy_column">
          <template v-if="props.row.key == 'status'">
            {{ props.row.status == 1 ? "启用" : "禁用" }}
          </template>
        </template> -->

        <template slot="diy_fixed" slot-scope="props">
          <el-button class="dl_color_btn" type="text" @click="detail_click"
            >详情</el-button
          >
          <el-button class="dl_color_btn" type="text">删除</el-button>
        </template>
      </ty-Table>

      <el-row type="flex" justify="center">
        <el-col :span="24">
          <div class="ty_fy_div">
            <el-pagination
              :current-page="fyData.start"
              :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
              :page-size="fyData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fyData.totalRows"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!--大数据报告详情-->
    <el-drawer size="50%" :visible.sync="drawer_detail_show">
      <div slot="title" class="d_title">大数据报告详情</div>
      <div class="drawer_detail_body">
        <div class="bg_tab_div">
          <el-tabs v-model="tab_active" @tab-click="tab_click">
            <el-tab-pane
              v-for="(v, k) in tab_list"
              :key="k"
              :label="v.label"
              :name="v.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="cont_body">
          <div id="jbxx" class="c_item">
            <div class="c_title">基本信息</div>
            <div class="grid_div">
              <div class="g_item">姓名：杨淑</div>
              <div class="g_item">身份证号：500221199105050505</div>
              <div class="g_item">手机号码：1561515151</div>
              <div class="g_item g_flex1">身份证检查结果：检验通过</div>
              <div class="g_item g_flex1">
                手机号检测结果：被查询人姓名与运营商提供的一致、被查询人身份证与运营商提供的一致
              </div>
            </div>
          </div>
          <div id="yhlsqjl" class="c_item">
            <div class="c_title">
              <div>银行类申请记录</div>
              <div class="c_sub_div">
                <div
                  @click="yhlsqjl_click(k)"
                  v-for="(v, k) in sqjl_list"
                  :key="k"
                  :class="['sub_item', yhlsqjl_active === k && 'active']"
                >
                  {{ v }}
                </div>
              </div>
            </div>
            <div class="grid_div">
              <div class="g_item">传统银行申请次数：0</div>
              <div class="g_item">传统银行申请机构数：0</div>
              <div class="g_item">网络零售银行申请次数：0</div>

              <div class="g_item">网络零售银行申请机构数：0</div>
              <div class="g_item">周末申请次数：0</div>
              <div class="g_item">周末申请机构数：0</div>

              <div class="g_item">夜间申请次数：0</div>
              <div class="g_item">夜间申请机构数：0</div>
            </div>
          </div>
          <div id="fyhlsqjl" class="c_item">
            <div class="c_title">
              <div>非银行类申请记录</div>
              <div class="c_sub_div">
                <div
                  @click="fyhlsqjl_click(k)"
                  v-for="(v, k) in sqjl_list"
                  :key="k"
                  :class="['sub_item', fyhlsqjl_active === k && 'active']"
                >
                  {{ v }}
                </div>
              </div>
            </div>
            <div class="grid_div">
              <div class="g_item">小贷申请次数：0</div>
              <div class="g_item">消费分期申请机构数:0</div>
              <div class="g_item">代偿分期申请次数:0</div>

              <div class="g_item">其他分期申请机构数:0</div>
              <div class="g_item">夜间申请次数:0</div>
              <div class="g_item">小贷申请机构数：0</div>

              <div class="g_item">现金分期申请次数：0</div>
              <div class="g_item">代偿分期申请机构数：0</div>
              <div class="g_item">周末申请次数：0</div>

              <div class="g_item">夜间申请机构数：0</div>
              <div class="g_item">消费分期申请次数：0</div>
              <div class="g_item">现金分期申请机构数：0</div>
              <div class="g_item">其他分期申请次数：0</div>
              <div class="g_item">周末申请机构数：0</div>
            </div>
          </div>
          <div id="jdjl" class="c_item">
            <div class="c_title">借贷记录</div>

            <div class="grid_div">
              <div class="g_item">放款机构：0</div>
              <div class="g_item">消费金融类机构数：0</div>
              <div class="g_item">网络底框类机构数：4</div>

              <div class="g_item">贷款已结清机构数贷款时长(天)：0</div>
              <div class="g_item">最近一次交易距离当前时间(天)：1</div>
              <div class="g_item">累计交易金额：45000~115000</div>

              <div class="g_item">交易失败金额(最小值)：1300~∞</div>
              <div class="g_item">历史贷款机构成功还款笔数:10~34</div>
              <div class="g_item">历史贷款机构交易失败笔数:3~5</div>

              <div class="g_item">历史逾期机构数：0</div>
              <div class="g_item">历史逾期金额(元):0</div>
            </div>
          </div>
          <div id="glajsm" class="c_item">
            <div class="c_title">关联案件扫描</div>

            <div class="grid_div">
              <div class="g_item">关联案件数：0</div>
              <div class="g_item">其他案件：0</div>
              <div class="g_item">限制高消费案件：0</div>

              <div class="g_item">刑事案件：0</div>
              <div class="g_item">失信案件：0</div>
              <div class="g_item">民事案件：0</div>

              <div class="g_item">被执行案件：0</div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import tyTable from "@/components/ty_el_table/ty_el_table.vue";
export default {
  components: {
    tyTable,
  },
  data() {
    const tablePrps = [
      { key: "id", label: "id" },
      { diy_show: true, key: "url_ext", label: "图片" },
      { key: "link", label: "跳转地址" },
      { diy_show: true, key: "status", label: "启用状态" },
      { key: "created_at", label: "创建时间" },
      { key: "updated_at", label: "修改时间" },
    ];
    return {
      tablePrps,
      tableData: [
        {
          id: 1,
          url_ext: "",
          link: "",
          status: 1,
          created_at: "2023-10-01 12:00:00",
          updated_at: "2023-10-01 12:00:00",
        },
      ],
      serch_form: {
        phone: "",
      },
      fyData: {
        start: 1, //当前第几页
        limit: 10, //每页多少条
        totalRows: 0, //总数据条数
      },
      drawer_detail_show: false,
      tab_active: "jbxx",
      tab_list: [
        { label: "基本信息", name: "jbxx" },
        { label: "银行类申请记录", name: "yhlsqjl" },
        { label: "非银行类申请记录", name: "fyhlsqjl" },
        { label: "借贷记录", name: "jdjl" },
        { label: "关联案件扫描", name: "glajsm" },
      ],
      yhlsqjl_active: 0,
      fyhlsqjl_active: 0,
      sqjl_list: ["近15天", "近1月", "近3月", "近6月", "近1年"],
    };
  },
  methods: {
    detail_click() {
      this.drawer_detail_show = true;
    },
    init_fun() {},
    handleSizeChange(val) {
      this.fyData.limit = val;
      this.init_fun();
    },
    handleCurrentChange(val) {
      this.fyData.start = val;
      this.init_fun();
    },
    tab_click(tab, e) {
      const element = document.getElementById(tab.name);
      if (element) {
        element.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
    },
    yhlsqjl_click(k) {
      this.yhlsqjl_active = k;
    },
    fyhlsqjl_click(k) {
      this.fyhlsqjl_active = k;
    },
  },
};
</script>

<style lang="scss" scoped>
.peipao_body {
  .serch_div {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
  }
  .table_body {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }

  .d_title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }

  .drawer_detail_body {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .cont_body {
      width: 100%;
      flex: 1;
      //标题 45 tab 43 padding 40
      max-height: calc(100vh - 45px - 43px - 40px);
      overflow-y: auto;
      scrollbar-width: none;
      box-sizing: border-box;
      .c_item {
        background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
        box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
        border-radius: 12px;
        border: 2px solid #ffffff;
        box-sizing: border-box;
        padding: 20px;
        margin-top: 20px;
        .c_title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 30px;
          .c_sub_div {
            display: flex;
            align-items: center;
            .sub_item {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 12px;
              color: #8593a3;
              border-radius: 4px;
              border: 1px solid transparent;
              box-sizing: border-box;
              cursor: pointer;
              transition: all 0.3s;
              padding: 8px 10px;
              margin-right: 10px;
              &.active {
                border: 1px solid #0084ff;
                color: #0084ff;
              }
            }
          }
        }
        .grid_div {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 15px;
          margin-top: 15px;
          .g_item {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #303233;
          }
          .g_flex1 {
            grid-column: 1 / -1;
          }
        }
      }
    }
  }
}

//抽屉样式自定义
::v-deep .el-drawer {
  background-color: #eff2f7;
}
::v-deep .el-drawer__header {
  margin-bottom: 0;
}

//顶部报告tabs样式自定义
.bg_tab_div {
  ::v-deep .el-tabs__nav-scroll {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    padding: 0 20px;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    content: none;
  }
  ::v-deep .el-tabs__header {
    margin: 0;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #0084ff;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #0084ff;
  }

  ::v-deep .el-tabs__item.is-top:last-child {
    padding-right: 40px;
  }
}
</style>
